Cara Membuat Tabel Pada Postingan Blog

Untuk menampilkan data yang berbentuk kolom di blog, kita membutuhkan tabel. Nah Untuk membuat tabel yang sederhana, lebih jelasnya kita langsung saja.
Ini adalah contoh tabel yang terdiri dari 2 kolom ke samping dan 3 baris ke bawah.

<table border="1">
<tr>
<td>Teks 1.1 </td>
<td>Teks 1.2 </td>
</tr>
<tr>
<td>Teks 2.1 </td>
<td>Teks 2.2 </td>
</tr>
<tr>
<td>Teks 3.1 </td>
<td>Teks 3.2 </td>
</tr>
</table>

maka hasilnya seperti ini :

Teks 1.1	Teks 1.2
Teks 2.1	Teks 2.2
Teks 3.1	Teks 3.2

Selanjutnya untuk mengatur Lebar dan Tinggi Tabel seperti yang kita inginkan, kita hanya menambahkan :

<table border="1" width="55%">
<tr>
<td style="width:50%;height:30px;" >Teks 1.1 </td>
<td>Teks 1.2 </td>
</tr>
<tr>
<td>Teks 2.1 </td>
<td>Teks 2.2 </td>
</tr>
<tr>
<td>Teks 3.1 </td>
<td>Teks 3.2 </td>
</tr>
</table>

maka hasilnya seperti ini :

Teks 1.1	Teks 1.2
Teks 2.1	Teks 2.2
Teks 3.1	Teks 3.2

Kalau untuk merubah bentuk Tabel dari 2 kolom menjadi 1 kolom tambahkan saja colspan, seperti di bawah ini.

<table border="1" width="55%">
<tr>
<td colspan="2">Teks 1.1 Teks 1.2</td>
</tr>
<tr>
<td>Teks 2.1 </td>
<td>Teks 2.2 </td>
</tr>
<tr>
<td>Teks 3.1 </td>
<td>Teks 3.2 </td>
</tr>
</table>

maka hasilnya seperti ini :

Teks 1.1 Teks 1.2
Teks 2.1	Teks 2.2
Teks 3.1	Teks 3.2

Kalau script yang ini :

<table border="1" width="55%">
<tr>
<td style="width:50%" rowspan="2">Teks 1.1 Teks 2.1</td>
<td>Teks 1.2 </td>
</tr>
<tr>
<td>Teks 2.2 </td>
</tr>
<tr>
<td>Teks 3.1 </td>
<td>Teks 3.2 </td>
</tr>
</table>

maka hasilnya akan seperti ini :

Teks 1.1 Teks 2.1	Teks 1.2
	Teks 2.2
Teks 3.1	Teks 3.2

Jika ingin memberi warna pada tabel script nya seperti ini :

<table style="background:#99FF00" width="55%"border="1">
<tr>
<th style="background:red;width:50%;">Teks 1.1 </th>
<th style="background:red;">Teks 1.2 </th>
</tr>
<tr>
<td>Teks 2.1 </td>
<td>Teks 2.2 </td>
</tr>
<tr>
<td>Teks 3.1 </td>
<td>Teks 3.2 </td>
</tr>
</table>

maka hasilnya seperti ini :

Teks 1.1	Teks 1.2
Teks 2.1	Teks 2.2
Teks 3.1	Teks 3.2

Untuk Warnanya bisa di ganti atau Klik Disini untuk melihat kode warnanya. Hanya ini yang bisa saya sampaikan, selamat mencoba dan terima kasih

Selamat Datang Para Blogger, Silahkan Tulis Komentar Anda Yang Bisa Membangun Blog Ini Agar Tetap Hidup. Terima Kasih Atas Kunjungannya Ke Blog Sederhana Ini. Selamat Membaca Semoga Bermanfaat